---
metaTitle: Container
metaDescription: Constrains the maximum width of page content.
sourcePath: components/container
---

```jsx live=true
<Box style={{ background: "var(--gray-a2)", borderRadius: "var(--radius-3)" }}>
	<Container size="1">
		<DecorativeBox>
			<Box py="9" />
		</DecorativeBox>
	</Container>
</Box>
```

## API Reference

This component is based on the `div` element and supports [common margin props](/themes/docs/overview/layout#margin-props).

<ThemesPropsTable defs="containerPropDefs" />

Container sizes use the following `max-width` values, which may be customized if needed.

<Table.Root variant="surface" my="5">
	<Table.Header>
		<Table.Row>
			<Table.ColumnHeaderCell>Size</Table.ColumnHeaderCell>
			<Table.ColumnHeaderCell>CSS variable</Table.ColumnHeaderCell>
			<Table.ColumnHeaderCell>Width</Table.ColumnHeaderCell>
		</Table.Row>
	</Table.Header>

    <Table.Body>
    	<Table.Row>
    		<Table.RowHeaderCell>`size="1"`</Table.RowHeaderCell>
    		<Table.Cell><Code color="gray">--container-1</Code></Table.Cell>
    		<Table.Cell><Code color="gray">448px</Code></Table.Cell>
    	</Table.Row>

    	<Table.Row>
    		<Table.RowHeaderCell>`size="2"`</Table.RowHeaderCell>
    		<Table.Cell><Code color="gray">--container-2</Code></Table.Cell>
    		<Table.Cell><Code color="gray">688px</Code></Table.Cell>
    	</Table.Row>

    	<Table.Row>
    		<Table.RowHeaderCell>`size="3"`</Table.RowHeaderCell>
    		<Table.Cell><Code color="gray">--container-3</Code></Table.Cell>
    		<Table.Cell><Code color="gray">880px</Code></Table.Cell>
    	</Table.Row>

    	<Table.Row>
    		<Table.RowHeaderCell>`size="4"`</Table.RowHeaderCell>
    		<Table.Cell><Code color="gray">--container-4</Code></Table.Cell>
    		<Table.Cell><Code color="gray">1136px</Code></Table.Cell>
    	</Table.Row>

    </Table.Body>

</Table.Root>

The following props are shared between [Box](./box), [Flex](./flex), [Grid](./grid), [Container](./container) and [Section](./section) components. Read more about layout components in [Layout](/themes/docs/overview/layout).

<ThemesPropsTable defs="layoutPropDefs" />
